<template>
  <div class="vin-log-configuration-page">
    <!-- 查询 -->
    <div style="padding:10px;margin: 6px 10px 0;">
      <el-form :model="queryData" class="demo-form-inline" inline >
        <el-form-item>
          <el-input v-model="queryData.vinId" placeholder="请输入vin号" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="queryFn()" @keyup.enter.native="queryFn()">查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="note-box">
      <i class="el-icon-info"></i> 提示：
      <p class="note">
        1. 云端配置打开开关后，云端立即生效。车端每隔5分钟查询，查询到开关状态变动后生效
      </p>
      <p class="note">
        2. 车端生效后，开始进行车端近期的日志打包操作上传
      </p>
      <p class="note">
        3. 取最新的不大于“日志大小”的全量日志或德赛日志打包，车端将打包日志文件上传到字节tos桶中
      </p>
      <p class="note">
        4. 车端完成上传后通知云端接口，云端将开关重置为关闭状态
      </p>
    </div>
    <!-- 表格 -->
    <div class="content">
      <TableComponent v-loading="isLoading" :assetList="tableDataList" :tableColumns="tableColumns"
        element-loading-text="加载中...">
        <template #uploadAllLog="{ row }">
          <span>{{ row.uploadAllLog ? 'ON' : 'OFF' }}</span>
        </template>
        <template #desayLogUpload="{ row }">
          <span>{{ row.desayLogUpload ? 'ON' : 'OFF' }}</span>
        </template>
        <template #modifyTime="{ row }">
          <span>{{ row.modifyTime.slice(0,19) }}</span>
        </template>
        <template #operation="{ row }">
          <el-button size="small" type="text" @click="openModal(row)">
            更改配置
          </el-button>
        </template>
      </TableComponent>
    </div>
    <LogConfigDialog ref="logConfigDialogRef" @feedbackFn="feedbackFn"/>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import TableComponent from '@/components/TableComponent.vue';
import { tableColumns } from '@/constant/vinLogConfiguration.js';
import { queryStrategyLogInfoByVin } from '@/api/vinLogConfigurationApi.js';
import LogConfigDialog from './components/LogConfigDialog.vue'
import { ElMessage } from 'element-plus';

const logConfigDialogRef = ref(null)
const queryData = reactive({
  vinId: ''
})
const tableDataList = ref([])
const isLoading = ref(false)

const queryFn = () => {
  getPageData()
};
// 创建完成后重调获取列表接口
const feedbackFn = () => {
    getPageData();
}
// 获取列表接口
const getPageData = () => {
  if(!queryData.vinId) return
  isLoading.value = true
  queryStrategyLogInfoByVin(queryData.vinId).then(res => {
    isLoading.value = false
    if (res.data.code === 200) {
      let obj = {...res.data.data,vin: queryData.vinId}
      tableDataList.value[0] = obj; 
    }
    
  })
};

const openModal = (row) => {
  logConfigDialogRef.value.switchVisible(row)
}
onMounted(() => {
  getPageData()
})
</script>

<style lang="less" scoped>
  .content {
    padding: 0 20px;
  }
  .note-box {
    margin: 10px 20px 20px;
    color: rgb(64, 158, 255);
  }
</style>